<template>
  <div class="select-store">
    <h2>请选择门店</h2>
    <el-row :gutter="16">
      <el-col v-for="s in stores" :key="s.id" :span="8">
        <el-card @click="selectStore(s)" class="store-card" shadow="hover">
          <h4>{{ s.storeName }}</h4>
          <p>{{ s.address }}</p>
          <p>电话：{{ s.phone }}</p>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useCustomerStore } from '@/stores/customer'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import { useRoute } from 'vue-router'

const stores = ref<any[]>([])
const router = useRouter()
const customerStore = useCustomerStore()

const fetchStores = async () => {
  try {
    const { data: res } = await axios.get('/api/stores')
    stores.value = res.data 
  } catch {
    ElMessage.error('获取门店失败')
  }
}
const route = useRoute() 
const selectStore = (store: any) => {
  customerStore.setStore(store)
  const redirect = route.query.redirect || '/customer'
  router.replace(redirect as string)
}

onMounted(fetchStores)
</script>

<style scoped>
.select-store {
  padding: 32px;
}
.store-card {
  cursor: pointer;
  margin-bottom: 16px;
}
</style>